<template>
  <div class="form-graoup">
    <form method="post">
      <div class="ipt-group1">
        <input
          class="phone"
          @blur="phone"
          v-model="iphone"
          type="text"
          placeholder="请输入手机号"
        />
        <p>+86 <span class="iconfont icon-icon--"></span></p>
      </div>
      <div class="ipt-group2">
        <input
          type="text"
          v-model="code"
          @blur="iscode"
          placeholder="请输入验证码"
        />
        <button :disabled="disabled" @click="sendcode">{{ btntxt }}</button>
      </div>
      <div class="checkbox">
        <p :class="{ on: isshow }" @click="addName"></p>
        登录即同意联通/移动统一认证服务条款,用户协议,隐私条款
      </div>
      <input class="submit" @click="checkUser" type="button" value="登 录" />
    </form>
    <div class="logins">
      其他登录方式<span class="iconfont icon-iconfront-"></span>
      <div>
        <span style="color: skyblue" class="iconfont icon-QQ"></span
        ><span style="color: #4cbf00" class="iconfont icon-weixin"></span
        ><span style="color: red" class="iconfont icon-weibo"></span>
      </div>
    </div>
  </div>
</template>

<script>
import "../../../static/css/iconfont/iconfont.css";
export default {
  data() {
    return {
      isshow: false,
      iphone: "",
      code: "",
      disabled: false,
      time: 60,
      btntxt: "发送验证码",
    };
  },
  methods: {
    phone() {
      let userphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.iphone == "") {
        this.toNotify("手机号不能为空");
        return false;
      } else if (!userphone.test(this.iphone)) {
        this.toNotify("手机号有误");
        return false;
      } else {
        return true;
      }
    },
    iscode() {
      if (this.code == "") {
        this.toNotify("验证码不能为空");
        return false;
      } else {
        return true;
      }
    },
    sendcode() {
      this.time = 60;
      this.timer();
    },
    //发送手机验证码倒计时
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.btntxt = this.time + "秒后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "发送验证码";
        this.disabled = false;
      }
    },
      // 检查
    checkUser() {
       let userphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(this.iphone==""  && this.code == ""){
         this.toNotify("信息输入有误");
      }else if(!userphone.test(this.iphone)){
         this.toNotify("信息输入有误");
         this.iphone=="";
      }else if(this.isshow==false){
        this.toNotify("请勾选同意隐私条款");
      }else{
          sessionStorage.setItem("Userphone", this.iphone);
          this.$router.push("/personal/")
      }
    },
    toNotify(content) {
      this.$notify({
        message: content,
        height: "200px",
      });
    },
    addName(){
      if(this.isshow==false){
         this.isshow=true
      }else{
         this.isshow=false
      }
    }
  },
};
</script>

<style scoped lang="less">
form {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem;
  div {
    position: relative;
    &.ipt-group2 {
      margin-top: 0.6rem;
      button {
        position: absolute;
        right: 10%;
        top: -0.3rem;
      }
    }
    &.checkbox {
      font-size: 12px;
      margin-top: 0.2rem;
      padding: 0.2rem;
      box-sizing: border-box;
      p {
        width: 10px;
        height: 10px;
        border: 1px solid black;
        border-radius: 50%;
        top: 0.01rem;
        left: -0.1rem;
        &.on {
          background: green;
        }
      }
    }
    input {
      width: 100%;
      border: none;
      border-bottom: 1px solid gray;
      box-sizing: border-box;
      &.phone {
        padding-left: 1rem;
      }
    }
    p {
      position: absolute;
      top: -0.3rem;
      color: black;
      span {
        color: black;
        font-size: 15px;
      }
    }
  }
  .submit {
    width: 100%;
    height: 0.8rem;
    background: #f3d02a;
    border: none;
    margin: 0.3rem 0rem;
  }
}
.logins {
  color: gray;
  text-align: center;
  div {
    margin-top: 0.5rem;
    span {
      font-size: 0.7rem;
      margin-left: 0.2rem;
    }
  }
}
</style>